﻿<!DOCTYPE html>
<html>
<head>
    <title>Knockout JS - basics</title>
    <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="Scripts/knockout-2.0.0.js" type="text/javascript"></script>
</head>
<body>
    <h1>All the code description can be found <a href="http://visualstudiomagazine.com/articles/2012/02/01/2-great-javascript-data-binding-libraries.aspx">at</a></h1>
    <div>
        First Name: <input data-bind="value: person.firstName" /><br />
        Last Name: <input data-bind="value: person.lastName" /><br />
        Full Name is
        <span data-bind="text: person.firstName"></span>
        <span data-bind="text: person.lastName"></span>
    </div>

    <div>
        <h2>Other examples</h2>
        <p><a href="knockout-tmpl.html">Templating</a></p>
        <p><a href="jsviews-tmpl.html">Js Views</a></p>
    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            ko.applyBindings(vm);
        });

        var vm = {
            person: {
                firstName: ko.observable("John"),
                lastName: ko.observable("Papa")
            }
        };
    </script>
</body>
</html>
